<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<input type = "hidden" id = "category" name = "category" value = "location">
<div id="content_location">
	<div id="top-area">
		<div class="tab-box">
			<p class="state">
				트래블로 여행자가 직접 등록한 총 <em>59,138</em>개의 스팟이 있습니다.
			</p>
			<ul class="tab-navi">
				<li data-mode="category" class="on"><a href="#">도시별 스팟 탐색</a></li>
				<li data-mode="keyword"><a href="#">스팟 검색</a></li>
			</ul>
			<div class="content">
				<ul class="category">
					<li class="cate-all on" data-code="0">
						<p class="icon">
							<a href="#"><span></span></a>
						</p>
						<p class="name">
							<a href="#">전체</a>
						</p>
					</li>

					<li class="cate-A" data-code="A">
						<p class="icon">
							<a href="#"><span></span></a>
						</p>
						<p class="name">
							<a href="#">볼 곳</a>
						</p>
					</li>

					<li class="cate-B" data-code="B">
						<p class="icon">
							<a href="#"><span></span></a>
						</p>
						<p class="name">
							<a href="#">즐길 곳</a>
						</p>
					</li>

					<li class="cate-C" data-code="C">
						<p class="icon">
							<a href="#"><span></span></a>
						</p>
						<p class="name">
							<a href="#">먹을 곳</a>
						</p>
					</li>

					<li class="cate-D" data-code="D">
						<p class="icon">
							<a href="#"><span></span></a>
						</p>
						<p class="name">
							<a href="#">살 곳</a>
						</p>
					</li>

					<li class="cate-E" data-code="E">
						<p class="icon">
							<a href="#"><span></span></a>
						</p>
						<p class="name">
							<a href="#">잘 곳</a>
						</p>
					</li>

					<li class="cate-F" data-code="F">
						<p class="icon">
							<a href="#"><span></span></a>
						</p>
						<p class="name">
							<a href="#">교통/편의</a>
						</p>
					</li>

				</ul>
				<fieldset class="search">
					<span class="input-holder"><input class="spot-keyword"
						type="text" /></span>
				</fieldset>
			</div>
		</div>
		<div class="area">
			<span class="in">in</span>
			<fieldset class="city-search">
				<input class="city-keyword required" type="text" />
				<button class="big">검색</button>
				<p class="guide category">다른 도시의 여행 스팟도 탐색해보세요.</p>
				<p class="guide keyword" style="display: none">어떤 여행지의 스팟을
					찾으시나요?</p>
				<ul class="auto-search-result" style="display: none">

				</ul>
			</fieldset>
		</div>
	</div>
	<div id="s-content">
		<div id="category">
			<div class="bg"></div>
			<ul>
				<li class="on"><a href="#">전체</a></li>
			</ul>
		</div>
		<div id="list-area">
			<div class="inner">
				<div class="spot-empty search-guide" style="display: none">
					<h3>찾고 싶은 여행 스팟이 있나요? 상단 검색창을 통해 검색해보세요. :-)</h3>
					<p>- 어느 나라 또는 어느 도시에 있는지 모른다면 그냥 스팟명만 검색창에 입력해주세요.</p>
					<p>
						- 새로운 스팟을 등록하고 싶다면, <a class="btn-reg-spot" href="#">+ 스팟 등록</a>
					</p>
					<div class="register">
						<h3>더 괜찮은 스팟을 알고 계시다고요?</h3>
						<p>- 여행 스팟을 등록하고, 다른 여행자들과 함께 공유하세요.</p>
						<button class="btn-reg-spot">+ 스팟 등록</button>
					</div>
				</div>
				<div class="spot-empty keyword-result" style="display: none">
					<h3>
						‘<em class="keyword">ㄷㄱ</em>’ 에 대한 검색 결과가 없습니다. :-(
					</h3>
					<p>- 단어의 철자가 정확한지 확인해주세요.</p>
					<p>- 원하는 스팟이 없다면 그 스팟의 정보를 등록하는 최초의 여행자가 되어보는건 어떨까요?</p>
					<p>
						- 스팟을 등록하면 다양한 <a href="http://blog.travelro.co.kr/314"
							target="_blank">스탬프를 획득</a>하실 수 있습니다. <a href="#"
							class="btn-reg-spot">+ 스팟 등록</a>
					</p>
				</div>
				<div class="spot-empty category-result" style="display: none">
					<h3>해당 지역에 트래블로 여행 스팟이 없네요. :-(</h3>
					<p>- 지도를 좀 더 움직여 다른 곳을 탐색해보세요.</p>
					<p>
						- 이 지역의 스팟 최초 등록자가 되어보는건 어떨까요? <a href="#" class="btn-reg-spot">+
							스팟 등록</a>
					</p>
				</div>
				<div class="spot-empty category-zoom" style="display: none">
					<h3>어머~! 지도를 너무 축소하셨어요. :-(</h3>
					<p>- 해당 지역에 스팟이 너무 많습니다.</p>
					<p>- 지도를 확대하거나 좀 더 움직여 다른 곳을 탐색해보세요.</p>
					<p>
						- 이 지역 더 좋은 여행 스팟을 알고 계시면, 공유해주세요. <a href="#"
							class="btn-reg-spot">+ 스팟 등록</a>
					</p>
				</div>
				<div class="spot-list" style="display: none">
					<p class="total">
						현재 보여지는 지도에서 <em class="total-cnt"></em>개의 스팟이 탐색되었습니다.
					</p>
					<ul>

					</ul>
					<div class="pagination"></div>
				</div>
			</div>
		</div>
		<div id="map-area">
			<div class="map"></div>
		</div>
	</div>
</div>